import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col, Radio, Card, Icon, Modal } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker

const DetailsForm = ({ form: { getFieldDecorator, getFieldsValue }, formData, onAlterFormModel, onChoose, titleStyle, message, openDetails }) => {
    const alterFormModel = () => {
        if (onAlterFormModel) {
            onAlterFormModel()
        }
    }
    const choose = () => {
        if (onChoose) {
            onChoose()
        }
    }

    const onOpenDetails = () => {
        if (openDetails) {
            openDetails()
        }
    }

    return (
        <div>
            <Card
                title={<div style={titleStyle}>表单基础信息&emsp;<span style={{ fontWeight: 'normal' }}><Icon type="info-circle" theme="filled" style={{ color: '#40a9ff' }} /> {message}</span></div>}
                extra={<Button onClick={onOpenDetails} type='primary' icon='eye'>表单样式预览</Button>}
                bordered={false}>
                <Form layout='inline'>
                    <Row gutter={16}>
                        <Col>
                            <FormItem label="适用机型">
                                {getFieldDecorator('model', {
                                    initialValue: formData.model || '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择机型'
                                        }
                                    ],
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请选择机型' disabled={true} style={{ width: '20vw' }} />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type='primary' icon='select' onClick={choose}>选择</Button>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem label="表格编码">
                                {getFieldDecorator('formCoding', {
                                    initialValue: formData.formCoding || '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入表格编码'
                                        }
                                    ],
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(
                                    <Input placeholder='请输入表格编码' style={{ width: '10vw' }} allowClear />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type='primary' icon='save' onClick={() => { alterFormModel() }}>保存</Button>
                            </FormItem>
                            <FormItem>
                                <span style={{ fontWeight: 'normal' }}><Icon type="info-circle" theme="filled" style={{ color: '#40a9ff' }} /> 表格编码需符合质检部要求，请勿随意变更。</span>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>

        </div>
    );
};

export default Form.create()(DetailsForm);
